Cookie 与 Web Storage

Cookie 与 localStorage / sessionStorage 都受 同源策略 约束，但通信方式、生命周期和容量不同：Cookie 可随请求自动携带、体积极小；Web Storage 不自动上送、API 简单，值均为 字符串（对象需 JSON.stringify）。

---

Cookie

document.cookie 可读写由脚本可见的 Cookie；HttpOnly 的项不会出现在 document.cookie 中。生产环境更常见由服务端 Set-Cookie 下发。本地文件 file:// 下行为与真实站点不一致，需本地服务或线上环境 再测。

# 增删改查
document.cookie = "key=value; expires=日期; max-age=秒; path=/; domain=xxx.com; secure; HttpOnly; SameSite=Lax";
const allCookies = document.cookie;

# 常见属性
1. key=value — 键值须为字符串
2. expires — GMT 过期时间
3. max-age — 秒；0 常表示立即删除；与 expires 同时存在时一般以 max-age 为准
4. domain — 如 .example.com 可被子域使用
5. path — 如 / 全站，/user 仅该路径下
6. secure — 仅 HTTPS 发送
7. httpOnly — JS 不可读，降低 XSS 窃 Cookie 风险
8. sameSite — Strict / Lax（常见默认）/ None（须配合 Secure），影响跨站是否自动携带

# 企业侧常见安全组合
Set-Cookie: token=xxx; HttpOnly; Secure; SameSite=Lax; Path=/;

# 特点
同步 API + 同源 + 可随请求自动携带 + 可设过期 + 体积极小 + 仅字符串

---

localStorage

同源 多标签页 共享同一套 localStorage。数据会长期保留，直至用户清理站点数据或代码删除。其它标签页写入时，当前页可监听 window 的 storage 事件做同步（触发写入的当前页不会收到 该事件）。

localStorage.setItem(key, value);
localStorage.getItem(key);
localStorage.removeItem(key);
localStorage.clear();

# 特点
同步 API + 同源共享 + 持久化 + 值只能是字符串

---

sessionStorage

与 localStorage 相同键值 API。数据绑定在 当前顶级浏览上下文（通常即当前标签页）；关闭该标签页即清空。同源不同标签页 不共享 sessionStorage。

sessionStorage.setItem(key, value);
sessionStorage.getItem(key);
sessionStorage.removeItem(key);
sessionStorage.clear();

# 特点
同步 API + 按标签页隔离 + 会话级生命周期 + 值只能是字符串

---

快速对照

项目	Cookie	localStorage	sessionStorage
典型容量	很小（单条约 4KB 量级）	数 MB 级（因实现而异）	同左
是否随 HTTP 请求	可自动携带	否	否
作用域	Path/Domain 等	同源	同源 + 单标签页
典型用途	会话标识、少量偏好、CSRF Token 等	主题、非敏感长期配置	表单草稿、单页流程临时态